<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<!-- 树形片段定义 -->
<div th:fragment="tree-fragment(depts, level)">
    <!-- 内容与主文件中的tree-fragment一致 -->
    <div th:fragment="tree-fragment(depts, level)" xmlns:th="http://www.thymeleaf.org">
        <th:block th:each="dept : ${depts}">
            <tr class="sub-department-row"
                th:data-id="${dept.departmentID}"
                th:data-parent="${dept.departmentParentID.departmentID}"
                th:style="'display: none; padding-left: ' + (${level} * 30) + 'px;'">
                <td>
                    <!-- 修改后的HTML部分 -->
                    <span class="toggle-icon"
                          th:class="${not #lists.isEmpty(dept.subDepartments)} ? 'has-children' : 'no-children'">
                          <span class="toggle-icon" th:if="${not #lists.isEmpty(dept.subDepartments)}">+</span>
                          <span class="toggle-icon" th:unless="${not #lists.isEmpty(dept.subDepartments)}">•</span>
                    </span>
                    <span th:text="${dept.departmentName}"></span>
                </td>
                <td th:text="${dept.departmentCode}"></td>
                <td th:text="${dept.departmentHeadID?.realName} ?: '未设置'"></td>
                <td>
                <span th:class="${dept.status} ? 'status-active' : 'status-inactive'"
                      th:text="${dept.status} ? '启用' : '禁用'"></span>
                </td>
                <td class="action-buttons">
                    <!-- 第一行按钮 -->
                    <div class="button-row">
                        <a th:href="@{/department/view/{id}(id=${dept.departmentID})}" class="btn-action view">查看</a>
                        <a th:href="@{/department/edit/{id}(id=${dept.departmentID})}" class="btn-action edit">编辑</a>
                        <a th:href="@{/department/toggle-status/{id}(id=${dept.departmentID})}"
                           class="btn-action"
                           th:class="${dept.status} ? 'btn-action disable' : 'btn-action enable'"
                           th:text="${dept.status} ? '禁用' : '启用'"
                           data-method="post"></a>
                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                document.body.addEventListener('click', function(event) {
                                    if (event.target.matches('a[data-method="post"]')) {
                                        event.preventDefault();

                                        // 创建隐藏表单
                                        const form = document.createElement('form');
                                        form.method = 'POST';
                                        form.action = event.target.getAttribute('href');

                                        // 提交表单
                                        document.body.appendChild(form);
                                        form.submit();
                                    }
                                });
                            });
                        </script>
                        <a th:href="@{/department/delete/{id}(id=${dept.departmentID})}"
                           class="btn-action delete"
                           data-method="post"
                           onclick="return confirm('确定要删除该部门吗？')">删除</a>
                    </div>
                    <!-- 第二行按钮 -->
                    <div class="button-row">
                        <a th:href="@{/department/set-head/{id}(id=${dept.departmentID})}" class="btn-action set-head">设置负责人</a>
                        <a th:href="@{/department/add-child/{id}(id=${dept.departmentID})}"
                           class="btn-action add-child"
                           th:if="${roleIdValue lt 4}">添加子部门</a>
                    </div>
                </td>
            </tr>

            <!-- 递归更多层级 -->
            <th:block th:insert="~{fragments/department-tree :: tree-fragment(${dept.subDepartments}, ${level + 1})}"
                      th:if="${not #lists.isEmpty(dept.subDepartments)}"></th:block>
            </th:block>
    </div>
</div>
</body>
</html>